<template>
  <div class="box2">
    <div class="title">
      <p>车型比例</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <view style="width: 100%; display: flex">
      <div class="charts" ref="charts"></div>
      <div class="charts2" ref="charts2"></div>
    </view>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, watch } from "vue";
//引入echarts
import * as echarts from "echarts";
// 定义 cartype 作为 props
const props = defineProps({
  cartype: Object,
});

let charts = ref();
let charts2 = ref();
const setChartOption1 = (chart: any, data: any) => {
  var option = {
    title: {
      text: "汽油与纯电动比(%)",
      left: "left",
      top: 0,
      textStyle: {
        //标题颜色
        color: "#fff",
      },
    },
    animation: true,
    stateAnimation: {
      duration: 300,
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c}%",
    },
    legend: {
      orient: "vertical", // 设置图例竖直排列
      right: 10, // 调整图例在右侧的位置
      top: "5%",

      textStyle: {
        // 添加textStyle属性
        color: "white", // 设置颜色为蓝色
      },
    },
    color: ["#4992FF", "#FF6E76"], // 设置全局饼图颜色
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "60%",
        data: data,
        label: {
          show: true,
          fontSize: 16,
          color: "#fff",
          fontWeight: "bold", // 文字粗细
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
      },
    ],
  };
  chart.clear();
  chart.setOption(option);
  chart.resize({
    height: 310,
    animation: {
      duration: 1000,
      easing: "cubicInOut",
    },
  });
};
const setChartOption2 = (chart: any, data: any) => {
  var option2 = {
    title: {
      text: "自动与手动比(%)",
      left: "left",
      top: 0,
      textStyle: {
        //标题颜色
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c}%",
    },
    legend: {
      orient: "vertical", // 设置图例竖直排列
      right: 10, // 调整图例在右侧的位置
      top: "5%",
      textStyle: {
        // 添加textStyle属性
        color: "white", // 设置颜色为蓝色
      },
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "60%",
        data: data,
        label: {
          show: true,
          fontSize: 16,
          color: "#fff",
          fontWeight: "bold", // 文字粗细
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
      },
    ],
  };
  chart.clear();
  chart.setOption(option2);
  chart.resize({
    height: 310,
    animation: {
      duration: 1000,
      easing: "cubicInOut",
    },
  });
};
// 监听 props.cartype 的变化
watch(
  () => props.cartype,
  (newValue) => {
    // 在数据变化时重新设置图表的数据和选项
    let mychart = echarts.init(charts.value);

    let mychart2 = echarts.init(charts2.value);
    setChartOption1(mychart, newValue[0]);
    setChartOption2(mychart2, newValue[1]);
  }
);
//组件挂载完毕初始化图形图标
onMounted(() => {
  try {
    let mychart = echarts.init(charts.value);
    let mychart2 = echarts.init(charts2.value);
    // 设置初始图表选项和数据
    setChartOption1(mychart, props.cartype[0]);
    setChartOption2(mychart2, props.cartype[1]);
  } catch (error) {
    console.log(error);
  }
});
</script>

<style scoped lang="scss">
.box2 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 5px;
  .title {
    margin-left: 20px;
    text-align: left;
    // color: #000;
    font-weight: bold;

    p {
      margin: 5px;
      color: white;
      font-size: 20px;
    }
  }

  .charts {
    height: 250px;
    flex: 1;
  }
  .charts2 {
    height: 250px;
    flex: 1;
  }
}
</style>